<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        li{
            border: 1px dashed #999;
            margin: 5px;
            line-height: 35px;
            font-size: 15px;
            padding-left: 5px;
            list-style: none;
            width: 100%;
            /* overflow: hidden; */
        }

        li:hover{
            background-color: hotpink;
            transition: all 0.8s ease;
        }

        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateY(80px)
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 0.6s ease;
        }

        .v-move{
            transition: all 0.6s ease;
            
        }
        .v-leave-active{
            z-index: 99999;
            position: absolute;
        }
        </style>
</head>

<body>
    <div id="app">
        <div>
            <label>
                id:
                <input type="text" v-model='id' v-focus="'pink'">
            </label>
            <label>
                name:
                <input type="text" v-model='name' @keyup.enter='add'>
            </label>
            <input type="button" value="添加" @click="add()">
        </div>
        <!-- <ul> -->
            <!-- 实现列表过渡时，如果需要过渡元素，是通过v-for循环渲染出来的，
            不能用transition 包裹，需要用 transition-group 包裹 -->
            <!-- 给transition-group  添加appear属性，可以实现入场时候的效果 -->
            <!--给transition-group 添加tag属性 可以指定transition-group
                渲染成指定的元素标签，如果不指定tag属性，默认渲染为span标签 -->
            <transition-group appear tag="ul">
                <li v-for='(item, i) in list' :key='item.id' @click='del(i)'>
                    {{item.id}}-----{{item.name}}
                </li>
            </transition-group>
           
        <!-- </ul> -->
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script>
        //自定义指令：v-focus 自动获取焦点;
        Vue.directive('focus',{
            bind:function(el,arg){
                //每当指令绑定到元素上的时候，会立即执行bind函数；只执行一次;
                //此时元素还未插入到DOM中，
                //一般在bind函数中进行css操作
                el.style.color= arg.value
            },
            inserted:function(el){
                //inserted 表示元素 插入到DOM中时候执行一次该函数；
                //在inserted函数中进行js操作
                el.focus()
            },
            uodated:function(el){
                //当VNode更新的时候执行，会被执行很多次
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                id:'',
                name:'', 
                list: [
                    {id: 1,name: '雷憨憨' },
                    {id: 2,name: '雷二狗'},
                    {id: 3,name: '雷二丫'},
                    {id: 4,name: '雷杉菜'}
                ]
            },
            methods: {
                add(){
                    this.list.push({id:this.id,name:this.name});
                    this.id= this.name='';
                },
                del(i){
                    this.list.splice(i,1)
                }
            },
        })
    </script>
</body>

</html>